<template>
	<div v-show="show_confirm" class="bombbox" ref="Boxconfirm" @click="hide">
		<div class="bombbox_content">
			<div class="bombbox_content_title">{{content_title}}</div>
			<div class="clearfix">
				<div @click="_box_confirm" class="box_confirm">{{content_confirm}}</div>
				<div @click="_box_cancel" class="box_cancel">{{content_cancel}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	export default {
		data () {
            return {
            	show_confirm:false
            }
        },
		props:['content_title','content_confirm','content_cancel'],
		methods:{
			_box_confirm:function(){
				this.$emit('confirmClick');
				this.show_confirm=false;
			},
			_box_cancel:function(){
				this.$emit('cancelClick');
				this.show_confirm=false;
			},
			show:function(){
				this.show_confirm=true;
			},
			hide:function(){
				this.$emit('allScreen');
				this.show_confirm=false;
			}
		}
	}
</script>

<style scoped>
	.bombbox{
		position: fixed;
	    width: 100%;
	    height: 100%;
	    z-index: 999;
	    top: 0;
	    left: 0;
		background: rgba(0,0,0,0.60);
	}
	.bombbox_content{
		width: 80%;
		height: 150px;
		margin: 220px auto 0;
		background: #FFFFFF;
		border-radius: 4px;
		font-size: 0;
	}
	.bombbox_content_title{
		padding: 45px 10px;
		line-height: 16px;
		text-align: center;
		font-size: 1.4rem;
		color: #808080;
	}
	.box_confirm{
		float: left;
		width: 50%;
		height: 44px;
		line-height: 44px;
		font-size: 1.6rem;
		text-align: center;
		color: #FFFFFF;
		background: #F89721;
	}
	.box_cancel{
		float: left;
		width: 50%;
		height: 44px;
		line-height: 44px;
		font-size: 1.6rem;
		text-align: center;
		color: #909090;
		background: #F5F5F5;
	}
	.clearfix:after{
		display: block;
		clear: both;
		content:'';
		height: 0;
		overflow: hidden;
		visibility: hidden;
	}
</style>